<template>

  <div class="sidebarCheck" style="height:100%;overflow:hidden;">
    <div :style="{height: setHeight}"></div>
    <a-tabs @change="callback" type="card" size="small">
      <a-tab-pane tab="场所列表" key="1">
        <div style="position: relative;padding-top: 40px;">
          <div style="padding: 0 10px;position: absolute;height:40px;left:0;top:0px;width: 100%; ">
              <a-input-search placeholder="请输入关键字" @search="searchPlace"/>
            </div>
          <div :style="heightTree" style="overflow:auto">
            <div style="padding: 0 10px;">
              <a-tree
                :size="'small'"
                :checkable= true
                :treeData="placeTree"
                @check="onCheck"
                @select="onSelect"
                :checkStrictly="false"
                :checkedKeys="checked"
                :selectedKeys="selected"
                :expandedKeys="iExpandedKeys"
                :autoExpandParent="autoExpandParent"
                @expand="onExpand"
              >
                <template slot="title" slot-scope="{title}">
                  <span v-if="title.indexOf(searchValue) > -1">
                    {{title.substr(0, title.indexOf(searchValue))}}
                    <span style="color: #f50">{{searchValue}}</span>
                    {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
                  </span>
                  <span v-else>{{title}}</span>
                </template>
              </a-tree>
            </div>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane tab="门列表" key="2">
        <div style="padding: 0 10px;">
          <a-input-search
            placeholder="请输入门编号或门名称查询"
            style="margin:0px 0px 10px 0px;"
            @search="handleQuery"
            v-model="searchName"
          />
          </div>
            <a-table
              bordered
              size="small"
              class="tableStyle"
              :scroll="{y: parseInt(heightTable)}"
              :rowKey="(record) => record.doorBh"
              :columns="columns"
              :loading="loading"
              :dataSource="doorList"
              :pagination="pagination"
              :rowSelection="{fixed:true,selectedRowKeys: doorBhChecked2, onChange: onChange}"
            />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
// import placeTree from "@/components/common/placeTree.vue";
import place from "@/api/accessControlSystem/place";
import door from "@/api/accessControlSystem/door";

export default {
  props: {
    placeChecked: Array,
    doorChecked: Array,
    doorBhChecked: Array,
    heightTree: String,
    heightTable: String,
    setHeight: {
      type: String,
      default: "4px"
    },
  },
  components: {

  },
  data() {
    let _this = this;

    return {
      searchValue:"",
      autoExpandParent: true, //是否自动展开父节点
      checked: [],
      selected: [],
       placeTree: [],
       iExpandedKeys: [],
      // 门表格
      loading: false,
      searchName: "",
      doorList: [],
      doorChecked2: [],
      doorBhChecked2: [],
      //表格表头
      columns: [
        { title: "门名称", dataIndex: "doorName", align: "center" ,width: 'auto',ellipsis: true,},
      ],
      pagination: {
        simple: true,
        current: 1,
        pageSize: 20, // 默认每页显示数量
        total: 0, //总条数
        //showSizeChanger: true, // 显示可改变每页数量
        //pageSizeOptions: ['20', '30', '50'], // 每页数量选项
        //showTotal: total => `共 ${total} 条数据`, // 显示总数
        //onShowSizeChange: (current, pageSize) => _this.changePage(1,pageSize), // 改变每页数量时更新显示
        onChange: (current, pageSize) => _this.changePage(current, pageSize) //点击页码事件
      }
    };
  },
  mounted() {
    let _this = this;
    // 初始化场所树
    place.getTreeList().then(res => {
      _this.placeTree = res.data.result;
      // console.log( _this.placeTree );
      if (_this.placeTree != "") {
        _this.iExpandedKeys = [_this.placeTree[0].key];
      }
    });

  },
  computed: {
    placeCheckedComputed: {
      get: function() {
        return this.placeChecked;
      },
      set: function(value) {
        this.$emit("update:placeChecked", value);
      }
    },
    doorCheckedComputed: {
      get: function() {
        return this.doorChecked;
      },
      set: function(value) {
        this.$emit("update:doorChecked", value);
      }
    },
    doorBhCheckedComputed: {
      get: function() {
        return this.doorBhChecked;
      },
      set: function(value) {
        this.$emit("update:doorBhChecked", value);
      }
    }
  },
  methods: {
    getDoorList() {
      let _this = this;
      //根据房间请求空床位数据
      let newArry = [];
      newArry = newArry.concat(_this.checked);
      newArry = newArry.concat(_this.selected);
      _this.loading = true;
      door
        .getDoorList({
          current: this.pagination.current,
          pageSize: this.pagination.pageSize,
          placeSerial: newArry.join(","),
          searchName: this.searchName
        })
        .then(function(res) {
          // console.log(res)
          if (res.data.success) {
            _this.loading = false;
            _this.doorList = res.data.result.records;
            _this.pagination.total = res.data.result.total;
          } else {
            _this.loading = false;
            _this.$message.error(res.data.message);
          }
        });
    },
    //分页查询信息
    changePage(current, pageSize) {
      this.pagination.current = current;
      this.pagination.pageSize = pageSize;
      this.getDoorList();
    },
    //选择面板
    callback(key) {
      if (key == 2) {
        this.changePage(1, this.pagination.pageSize);
      }
      this.$emit("update:tabChecked", key);
      this.doorChecked2 = []; //清空选中的门
      this.doorCheckedComputed = []; //清空选中的门
      this.doorBhChecked2 = []; //清空选中的门
      this.doorBhCheckedComputed = []; //清空选中的门
    },
    //搜索门
    handleQuery() {
      this.changePage(1, this.pagination.pageSize);
      this.doorChecked2 = []; //清空选中的门
      this.doorCheckedComputed = []; //清空选中的门
      this.doorBhChecked2 = []; //清空选中的门
      this.doorBhCheckedComputed = []; //清空选中的门
    },
    //选择门
    onChange(selectedKey, selectedRow) {
      var _this = this;
      // this.doorChecked2.push(b);
      // let intersection = Array.from(new Set(a.filter(v => bSet.has(v))))
      // console.log(selectedKey);
      // console.log(selectedRow);

      if (this.doorChecked2.length == 0) {
        this.doorChecked2.push(selectedRow[0]);
      } else {
        selectedKey.forEach((val, index, arr) => {
          var isExist = _this.doorChecked2.findIndex((v2, idx2, arr2) => {
            // console.log(v2);
            // console.log(val);

            return v2.doorBh === val;
          });
          // console.log(isExist);


          if (isExist < 0) {


            var obj = selectedRow.find((v3, idx3, arr3) => {
              return v3.doorBh === val;
            });
            if (obj) {
              _this.doorChecked2.push(obj);
            }
          }
        });

        _this.doorChecked2.forEach((val, index, arr) => {
          var isExist = selectedKey.findIndex((value, index, arr) => {
            return val.doorBh === value;
          });
          if (isExist < 0) {
            // delete _this.doorChecked2[index];
            _this.doorChecked2.splice(index, 1);
          }
        });
      }

      this.doorBhChecked2 = selectedKey;
      this.doorBhCheckedComputed = selectedKey;
      this.doorCheckedComputed = this.doorChecked2;
    },
    // 查询场所
    searchPlace(value) {
      // console.log(value);
      this.onSearch(value);
    },
    //树形选中
    onCheck(checked) {
      //this.checked = checked 交给父元素去修改数据
      this.$emit("update:checked", checked);
      this.$emit("on-check", checked);
      this.checked = checked;
      // console.log(checked);

      this.selected = [];
    },
    // 树形选择
    onSelect(selectedKeys, info) {
      this.$emit("update:selected", selectedKeys);
      this.$emit("on-select", selectedKeys);
      this.$emit("on-select-info", info);
      this.selected = selectedKeys;
      // console.log(selectedKeys);
      this.checked = [];
    },
    async onSearch(value) {
      let that = this;
      //根据value过滤树节点符合搜索值得节点，返回相应id数组，赋值给iExpandedKeys
      //这个是场所树得API
      let keys = await place.searchPlaceByKey({ key: value });
      // console.log(keys.data.result)
      if (keys.data.success) {
        that.iExpandedKeys = keys.data.result;
        that.autoExpandParent = true;
        that.searchValue = value;
      }
    },
    onExpand(expandedKeys) {
      this.iExpandedKeys = expandedKeys;
      this.autoExpandParent = false;
    }

  }
};
//
</script>

<style>
/*布局*/
.ant-tabs-bar {
  margin: 0 0 10px 0;
}
</style>
